<template>
  <div class="login">
    <div class="app-header">
      <div class="hd clearfix">
        <div class="fl logo">
          <img src="../assets/images/index/logo.png" width="180" alt="">
        </div>
        <div class="fr">
          <a href="#" class="link-white" @click.prevent="$router.push('/login')">已有账号？请登录</a>
        </div>
      </div>
    </div>
    
    <div class="content">
      <div class="form-wrap">
          <div class="f24 c1">忘记密码</div>
          <Form ref="loginForm1" class="mt20">
            <FormItem label="">
                <Input type="text" v-model="loginForm1.mobile"  placeholder="请输入手机号"></Input>
            </FormItem>
            <FormItem label="">
                <Input type="text" v-model="loginForm1.code" placeholder="请输入验证码" >
                   <div class="after" style="cursor: pointer;" slot="append" @click="getCode">{{codeText}}</div>
                </Input>
            </FormItem>
            <FormItem label="">
                <Input type="password" v-model="loginForm1.password"  placeholder="密码"></Input>
            </FormItem>
             <FormItem label="">
                <Input type="password" v-model="loginForm1.password2"  placeholder="确认密码"></Input>
            </FormItem>
            
            
            <FormItem>
                <Button type="primary" :loading="loading" @click="validateMobile('loginForm1')" long>完成</Button>
                
            </FormItem>
          </Form>
        <!-- step2 -->
        
      </div>
    </div>
    
    <AppFooter></AppFooter>
  </div>
</template>


<script>
import AppFooter from '@/webPages/AppFooter'
import {testPhone} from '@/api/util.js'
export default {
  components:{AppFooter},
  data () {
    return {
      step: 0,
      loginForm1:{
        mobile: '',
        code: '',
        password: '',
        password2: ''
      },
      loading: false,
      codeText: '获取验证码',
      timer: null
    }
  },
  methods:{
    getCode () {
      if (!testPhone(this.loginForm1.mobile)) {
        this.$Message.error('手机号格式有误')
        return
      }
      if (!this.timer) {
        let params = {
          mobile: this.loginForm1.mobile,
          type:'reset'
        }
        this.$postJson(this.$API.captcha, params).then(res => {
          if (res.errno === 0) {
            this.$Message.success('验证短信已发送')
            this.startCount()
          } else {
            this.$Message.error(res.errmsg)
          }
        })
      }
    },
    startCount () {
      if (!this.timer) {
        let t = 60
        this.timer = setInterval(() => {
          if (t <= 0) {
            clearInterval(this.timer)
            this.timer = null
            this.codeText = '获取验证码'
            return
          }
          t--
          this.codeText = t + 's'
        }, 1000)
      }
    },
    validateMobile (){
      // this.$Message.error('接口开发中...')
      // return;
      if (!testPhone(this.loginForm1.mobile)) {
        this.$Message.error('手机号格式有误')
        return
      }
      if (!this.loginForm1.code) {
        this.$Message.error('验证码不能为空')
        return
      }
      if (!this.loginForm1.password !== this.loginForm1.password2) {
        this.$Message.error('两次输入的密码不一致')
        return
      }
      let params = {
        mobile: this.loginForm1.mobile,
        code: this.loginForm1.code,
        password: this.loginForm1.password
      }
      this.loading = true
      this.$postJson(this.$API.reset, params).then(res => {
        this.loading = false
        if (res.errno === 0) {
          // this.step = 1
        } else {
          this.$Message.error(res.errmsg)
        }
      })
    },
    addInfo (){
      if (!this.loginForm2.trueName) {
        this.$Message.error('姓名不能为空')
        return
      }
      if (!this.loginForm2.username) {
        this.$Message.error('用户名不能为空')
        return
      }
      if (!this.loginForm2.password) {
        this.$Message.error('密码不能为空')
        return
      }
      if (this.loginForm2.password !== this.loginForm2.password2) {
        this.$Message.error('两次密码不一致')
        return
      }
      
      let params = {
        mobile: this.loginForm1.mobile,
        code: this.loginForm1.code,
        username: this.loginForm2.username,
        trueName: this.loginForm2.trueName,
        password: this.loginForm2.password
      }
      this.loading = true
      this.$postJson(this.$API.register, params).then(res => {
        this.loading = false
        if (res.errno === 0) {
          sessionStorage.token = res.data.token
          sessionStorage.userInfo = JSON.stringify(res.data.userInfo)
          this.step = 2
        } else {
          this.$Message.error(res.errmsg)
        }
      })
    }
  },
  beforeDestroy () {
    this.timer && clearInterval(this.timer)
  }
}
</script>

<style lang="less" scoped>
 @color-primary: #147de5;
 
 .app-header{
   background: @color-primary;
   color: #fff;
   height: 80px;
 }
 .logo {
   margin-top: 20px;
 }
 .fr{
   line-height: 80px;
   padding-right: 0;
 }
 .content{
   padding: 80px 0;
   background: #f2f2f2;
   .form-wrap{
     width: 360px;
     margin: auto;
     padding:40px;
     background:#fff;
   }
 }
</style>
